<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>凯骏机电有限公司</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
        .active {
            background-color: teal;
            color: white;
        }
    </style>
</head>


<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 假设你有一些数据
        var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

        // 绘制x轴和y轴
        ctx.beginPath();
        ctx.moveTo(50, 350); // 从左下角开始
        ctx.lineTo(550, 350); // 绘制x轴
        ctx.moveTo(50, 350); // 回到原点
        ctx.lineTo(50, 50); // 绘制y轴
        ctx.stroke();

        // 绘制x轴刻度
        ctx.font = "12px Arial";
        for (var i = 0; i <= 24; i++) {
            ctx.moveTo(50 + i * 20, 350);
            ctx.lineTo(50 + i * 20, 345);
            ctx.stroke();
            ctx.fillText(i, 50 + i * 20 - 5, 370);
        }

        // 绘制y轴刻度
        ctx.textAlign = "right";
        for (var i = 0; i <= 14; i++) {
            ctx.moveTo(50, 350 - i * 20);
            ctx.lineTo(45, 350 - i * 20);
            ctx.stroke();
            ctx.fillText(i * 10, 40, 350 - i * 20 + 5);
        }

        // 绘制折线
        ctx.beginPath();
        ctx.moveTo(50, 350 - data[0]); // 从第一个数据点开始
        ctx.strokeStyle = "red"; // 设置折线颜色
        for (var i = 1; i < data.length; i++) {
            ctx.lineTo(50 + i * 20, 350 - data[i]); // 绘制每个数据点
        }
        ctx.stroke();

        // 添加鼠标移动事件监听
        canvas.addEventListener('mousemove', function(event) {
            var mouseX = event.offsetX;
            var mouseY = event.offsetY;

            // 清除之前的竖线和文本
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 重新绘制x轴和y轴
            ctx.beginPath();
            ctx.moveTo(50, 350); // 从左下角开始
            ctx.lineTo(550, 350); // 绘制x轴
            ctx.moveTo(50, 350); // 回到原点
            ctx.lineTo(50, 50); // 绘制y轴
            ctx.stroke();

            // 重新绘制x轴刻度
            ctx.font = "12px Arial";
            for (var i = 0; i <= 24; i++) {
                ctx.moveTo(50 + i * 20, 350);
                ctx.lineTo(50 + i * 20, 345);
                ctx.stroke();
                ctx.fillText(i, 50 + i * 20 - 5, 370);
            }

            // 重新绘制y轴刻度
            ctx.textAlign = "right";
            for (var i = 0; i <= 14; i++) {
                ctx.moveTo(50, 350 - i * 20);
                ctx.lineTo(45, 350 - i * 20);
                ctx.stroke();
                ctx.fillText(i * 10, 40, 350 - i * 20 + 5);
            }

            // 绘制折线
            ctx.beginPath();
            ctx.moveTo(50, 350 - data[0]); // 从第一个数据点开始
            ctx.strokeStyle = "red"; // 设置折线颜色
            for (var i = 1; i < data.length; i++) {
                ctx.lineTo(50 + i * 20, 350 - data[i]); // 绘制每个数据点
            }
            ctx.stroke();

            // 绘制竖线和文本
            ctx.beginPath();
            ctx.moveTo(mouseX, 50);
            ctx.lineTo(mouseX, 350);
            ctx.stroke();
            ctx.fillText(mouseX - 50, mouseX, 40);
        });
        
    </script>
    <p id="test" class="test-t">test</p>
    <button onclick='test()'>test active</button><button onclick="disapear()">disappear</button>
    <script>       
        var element = document.getElementById('test');
        var test_getElement = document.getElementsByClassName('test-t');
        function test() {test_getElement[0].classList.add('active');}
        function disapear() {test_getElement[0].style.display = "none";}
        // 激活元素
        
        </script>
</body>
</html>